<template>
    <list-layout>
        <div slot="search">
            <el-form :model="queryParams" :inline="true" ref="queryForm" v-show="showSearch" label-width="88px">
                <el-row>
                    <el-col :span="6">
                        <!--           物料编号-->
                        <el-form-item :label="$t('inventoryManagement.inventoryManagement')" prop="materialCode">
                            <el-input v-model="queryParams.materialCode" :placeholder="$t('public.placeholder',{placeholder: $t('inventoryManagement.inventoryManagement')})" clearable size="small" @keyup.enter.native="handleQuery" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <!--            物料名称-->
                        <el-form-item :label="$t('material.materialName')" prop="materialName">
                            <el-input v-model="queryParams.materialName" :placeholder="$t('public.placeholder',{placeholder: $t('material.materialName')})" clearable size="small" @keyup.enter.native="handleQuery" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <!--            成熟度-->
                        <el-form-item label="成熟度" prop="maturity">
                            <el-input v-model="queryParams.maturity" :placeholder="$t('public.placeholder',{placeholder: '成熟度'})" clearable size="small" @keyup.enter.native="handleQuery" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <!--            物料类型-->
                        <el-form-item label="物料类型" prop="materialType">
                            <el-input v-model="queryParams.materialType" :placeholder="$t('public.placeholder',{placeholder: '物料类型'})" clearable size="small" @keyup.enter.native="handleQuery" />
                        </el-form-item>
                    </el-col>

                </el-row>
                <el-row>
                    <el-col :span="6">
                        <!--            供应商编号：-->
                        <el-form-item label="供应商编号" prop="supplierCode">
                            <el-input v-model="queryParams.supplierCode" :placeholder="$t('public.placeholder',{placeholder: '供应商编号'})" clearable size="small" @keyup.enter.native="handleQuery" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <!--            厂区：-->
                        <el-form-item label="厂区" prop="factoryName">
                            <el-input v-model="queryParams.factoryName" :placeholder="$t('public.placeholder',{placeholder: '厂区'})" clearable size="small" @keyup.enter.native="handleQuery" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24" align="center">
                        <el-form-item class="right-btns">
                            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">{{$t('public.query')}}</el-button>
                            <el-button icon="el-icon-refresh" class="resectBtn" size="mini" @click="resetQuery">{{$t('public.reset')}}</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

        </div>
        <div class="app-container">
            <div class="container-header">
                <div class="header-left">
                    版本管理
                </div>
            </div>
            <!--      <el-row :gutter="10" class="table-action-wrap btnGroup" >-->
            <!--        <el-col :span="1.5">-->
            <!--          <el-button-->
            <!--            class="exportitemBtn"-->
            <!--            size="mini"-->
            <!--            :loading="exportLoading"-->
            <!--            @click="handleExport"-->

            <!--          ><img src="@/assets/images/icons/daoru.png" alt="">  {{$t('public.export')}}</el-button>-->
            <!--        </el-col>-->
            <!--        &lt;!&ndash; <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> &ndash;&gt;-->
            <!--      </el-row>-->
            <div class="container-table mt10">
                <el-table :height="tableHeight" border :row-class-name="tableRowClassName" v-loading="loading" :data="typeList" @selection-change="handleSelectionChange">

                    <el-table-column type="selection" width="55" align="center" />
                    <!--          序号-->
                    <el-table-column :label="$t('public.serialNum')" type="index" width="55" align="center" />
                    <!--          物料编号-->
                    <el-table-column :label="$t('inventoryManagement.inventoryManagement')" align="left" prop="materialCode" minWidth="160" show-overflow-tooltip />
                    <!--          物料名称-->
                    <el-table-column :label="$t('material.materialName')" align="left" prop="materialName" minWidth="160" show-overflow-tooltip />
                    <!--          成熟度-->
                    <el-table-column label="成熟度" align="left" prop="maturity" minWidth="160" show-overflow-tooltip />
                    <!--          物料类型-->
                    <el-table-column label="物料类型" align="left" prop="materialType" minWidth="160" />
                    <!--          供应商编号-->
                    <el-table-column label="供应商编号" align="left" prop="supplierCode" minWidth="160" show-overflow-tooltip />
                    <!--          供应商类型-->
                    <el-table-column label="供应商类型" align="left" prop="supplierType" minWidth="160" />
                    <!--          版本号-->
                    <el-table-column :label="版本号" align="left" prop="version" minWidth="160" show-overflow-tooltip />
                    <!--          厂区-->
                    <el-table-column label="厂区" align="left" prop="factoryName" minWidth="160" />
                    <el-table-column :label="$t('public.opera')" fixed="right" align="center" width="160">
                        <template slot-scope="scope">
                            <div class="action-wrap">
                                <el-button type="primary" size="mini" @click="handleAction(scope.row)" v-hasPermi="['ny-iqc:inspectionPlan:getContrast']">版本对比</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>

                <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" layout="total, sizes, prev, pager, next, jumper" />
            </div>

            <!-- 新增|编辑｜查看 弹框 -->
            <!--      <mtool-detail :visible.sync="visible" v-model="form" :type="dialogType" @refresh="getList()"></mtool-detail>-->

        </div>
    </list-layout>
</template>
<script>
import {refreshCache,} from '@/api/basic/dict/type'
import {listVersion,} from '@/api/basic/version'
import {mapState} from 'vuex'
// import MtoolDetail from './detial.vue'
//检验管理-版本管理
export default {
    name: 'version',
    dicts: [
        'NYIQC_GAUGE_TYPE', //量具类型
    ],
    // components:{MtoolDetail},
    computed: {
        ...mapState({
            isFold: (state) => state.app.isFold,
        }),
    },
    watch: {
        isFold(val) {
            if (val === true) {
                this.tableHeight = 'calc(100vh - 308px)'
            } else {
                this.tableHeight = 'calc(100vh - 396px)'
            }
        },
    },
    data() {
        return {
            dialogType: 1, //1:新增  2：编辑 3：查看
            dialogForm: {},
            materialTypeOptions: [],
            direction: 'rtl',
            addInspection: false,
            visible: false,
            drawer: false,
            tableHeight: 'calc(100vh - 308px)',
            approvalOpen: false,
            viewModel: {
                inspectionInformation: '0',
            },
            editModel: {
                inspectionInformation: '0',
            },
            approvalForm: {
                status: '1',
                textarea: '',
            },
            selBtn: 1,
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 字典表格数据
            typeList: [],
            // 弹出层标题
            title: '',
            // 是否显示弹出层
            open: false,
            // 日期范围
            dateRange: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 20,
                materialCode: '',
                materialName: '',
                maturity: '',
                materialType: '',
                supplierCode: '',
                factoryName: '',
            },
            // 表单参数
            form: undefined,
            exportLoading: false,
            fullscreen: false,
        }
    },
    created() {
        this.getList()
    },
    methods: {
        drawerClose() {
            this.drawer = false
        },
        getList() {
            this.loading = true
            listVersion(this.queryParams).then((response) => {
                if (response.code == 200 && response.data) {
                    this.typeList = response.data
                    this.loading = false
                }
            })
        },
        // 取消按钮
        cancel() {
            this.open = false
            this.reset()
        },
        // 表单重置
        reset() {
            this.form = {
                dictId: undefined,
                dictName: undefined,
                dictType: undefined,
                status: '0',
                remark: undefined,
            }
            this.resetForm('form')
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1
            this.getList()
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.dateRange = []
            this.resetForm('queryForm')
            this.handleQuery()
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.form = {}
            this.dialogType = 1
            this.visible = true
        },
        handleApproval() {
            if (this.ids.length === 0) {
                this.$modal.msgWarning(
                    this.$t('inspectionManagement.pleaseSelectOne')
                )
                return
            }
            this.handleDelete()
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map((item) => item.materialCode)
            this.typeList.forEach((io, index) => {
                console.log('includes', this.ids.includes(io.materialCode))
                if (this.ids.includes(io.materialCode)) {
                    io.isHighLight = true
                } else {
                    io.isHighLight = false
                }
            })
            // this.single = selection.length!=1
            // this.multiple = !selection.length
        },

        tableRowClassName({ row, rowIndex }) {
            console.log('rowIndex', rowIndex, row)
            if (row.isHighLight === true) {
                console.log('rowIndex', row)
                return 'rowHighLight' //若isHighLight为true，则使用“rowHighLight”样式
            } else {
                return ''
            }
        },

        // materialTypeRemoteMethod(e){
        //   listALLMaterialType({materialTypeName:e}).then(res=>{
        //     this.materialTypeOptions = res.data
        //   })
        // },
        // handleMaterialTypeChange(e){
        //   this.queryParams.materialTypeName = e.join(',')
        // },
        // handleGaugeTypeChange(e){
        //   this.queryParams.gaugeType = e.join(',')
        // },
        /** 删除按钮操作 */
        handleDelete(row) {
            const dictIds = (row && row.id) || this.ids
            this.$modal
                .confirm('是否确认删除id为"' + dictIds + '"的数据项？')
                .then(function () {
                    return delGauge(dictIds)
                })
                .then(() => {
                    this.getList()
                    this.$modal.msgSuccess(this.$t('processDefinition.successfullyDeleted'))
                })
                .catch(() => {})
        },
        /** 查看按钮操作 */
        handleView(row) {
            this.dialogType = 3
            this.form = row
            this.visible = true
            // if(row.hasRead == 0){
            //   readNotice(row.noticeId).then(res=>{
            //     if(res.code == 200){
            //       this.handleQuery()
            //     }
            //   })
            // }
        },
        /** 编辑按钮操作 */
        handleEdit(row) {
            this.dialogType = 2
            this.form = row
            this.visible = true
        },
        /** 关闭抽屉操作 */
        handleClose(row) {
            this.drawer = false
        },
        /** 导出按钮操作 */
        handleExport() {
            // const queryParams = this.queryParams
            // this.$modal.confirm(this.$t('MaterialType.export')).then(() => {
            //   this.exportLoading = true
            //   return exportMaterialType(queryParams)
            // }).then(response => {
            //   this.$download.name(response.msg)
            //   this.exportLoading = false
            // }).catch(() => {})
            // this.download('masterdata/factory/export', {
            //   ...this.queryParams
            // }, `factory_${new Date().getTime()}.xlsx`)
        },
        /** 刷新缓存按钮操作 */
        handleRefreshCache() {
            refreshCache().then(() => {
                this.$modal.msgSuccess('刷新成功')
            })
        },
        handleAction(row) {
            const { factoryName, materialCode, supplierCode } = row
            this.$router.push({
                path: '/inspect/comparison',
                query: {
                    factoryName: encodeURIComponent(factoryName),
                    materialCode: encodeURIComponent(materialCode),
                    supplierCode: encodeURIComponent(supplierCode),
                },
            })
        },
    },
}
</script>
<style lang="scss" scoped>
::v-deep .el-card {
    padding-top: 20px;
    border: 0px;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    padding-bottom: 20px;
}
::v-deep .el-aside {
    padding: 0;
    margin-bottom: 0;
}
.content-style {
    border: 0px;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.08);
    border-radius: 2px;
    background-color: white;
    margin-top: 10px;
}
::v-deep .el-button-group .selBtn {
    background: #fff;
    border: 1px solid #0b7be3;
    color: #0b7be3;
}
::v-deep .el-button-group .unselBtn {
    background: #fff;
    border: 1px solid #ededf2;
    color: #666666;
}
.header-left {
    font-size: 14px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333333;
    padding: 3px 0 10px;
    display: inline-flex;
    justify-content: center;
    border-bottom: 2px solid #0b7be3;
}
.header-right {
    float: right;
}
.container-header {
    border-bottom: 1px solid #ededf2;
}
.container-table {
    float: left;
    //margin-top:6px;
    width: 100%;
}
.mb8 {
    float: left;
    margin-top: 6px;
    width: 100%;
}
.drawer-footer {
    display: flex;
    position: relative;
    z-index: 9999;
    bottom: -40px;
    height: 40px;
    justify-content: center;
    width: 100%;
}
.drawer-close {
    background: #f7f8fa;
    border-color: #f7f8fa;
}

.right-btns ::v-deep .el-button {
    margin-top: 0;
}
.app-container {
    padding: 0;
}
.table-action-wrap {
    padding: 12px 0;
}
::v-deep .rowHighLight {
    background: oldlace;
}
</style>
